<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义数据属性</title>
</head>
<body>
<div id="app" data-myName="zw" data-desc="hello world" data-zid="hello custom properties">
    自定义属性
</div>
</body>
<script>
    /** 1.自定义属性的定义
     *    HTML5 允许给元素指定非标准的属性，但要使用前缀 data-以便告诉浏览器，这些属性既不包含与渲染有关的信息，也不包含
     *    元素的语义信息。除了前缀，自定义属性对命名是没有限制的，data-后面跟什么都可以。
     *  2.自定义属性的访问
     *    定义了自定义数据属性后，可以通过元素的 dataset 属性来访问。dataset 属性是一个DOMStringMap 的实例，包含一组键/值
     *    对映射。元素的每个 data-name 属性在 dataset 中都可以通过 data-后面的字符串作为键来访问（例如，属性 data-myname、
     *    data-myName 可以通过 myname 访问，但要注意 data-my-name、data-My-Name 要通过 myName 来访问）
     *  3.自定义属性的应用场景
     *    自定义数据属性非常适合需要给元素附加某些数据的场景，比如链接追踪和在聚合应用程序中标识页面的不同部分。另外，单页应用程序
     *    框架也非常多地使用了自定义数据属性。
     * **/
     function checkCustomProperties(){
        //1.获取元素 DOM
        let divDOM = document.getElementById('app');
        //2.获取自定义属性（针对大小写有歧义，以后的开发中涉及到的，统一采用小写）
        console.log(divDOM.dataset.myname);//代码发现：data-myName，只能通过 myname 来访问
        console.log(divDOM.dataset.desc);
        console.log(divDOM.dataset.zid);
        //3.设置自定义属性值
        divDOM.dataset.myName = 'myName';
        divDOM.dataset.desc = 'desc';
        divDOM.dataset.zid = 'zid';
        console.log(divDOM.dataset.myName);
        console.log(divDOM.dataset.desc);
        console.log(divDOM.dataset.zid);
        //4.对自定义属性值进行判断
        if(divDOM.dataset.myName){
            console.log('存在data-myName的自定义属性');
        }
    }
    checkCustomProperties();
    // zw
    // hello world
    // hello custom properties
    // myName
    // desc
    // zid
    // 存在data-myName的自定义属性
</script>
</html>